<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    @ok="handleOk"
    class="customHeight customHeightChild modal_title"
    v-drag
  >
    <a-form-model ref="form" class="cus-ant-form" :model="model" v-enterToNext>
      <a-row style="padding-top: 20px">
        <a-col
          :offset="1"
          :span="8"
          style="color: rgba(0, 0, 0, 1); font-size: 16px"
        >
          {{ $t("卡号") }}：{{ model.chipNo }}
        </a-col>
        <a-col :span="14" style="color: rgba(0, 0, 0, 1); font-size: 16px">
          {{ $t("取卡时间") }}：{{ model.createTime }}
        </a-col>
        <a-col :span="24" style="margin-top: 20px">
          <a-form-model-item
            :label="$t('日消费限额')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="dayCoinLimit"
            :rules="[{ required: true, message: this.$t('请输入') }]"
          >
            <div style="display:flex;align-items: center;">
              <a-input
                v-model="model.dayCoinLimit"
                :placeholder="$t('请输入')"
                class="cus-input"
                ref="dayCoinLimit"
              />
              <span style="white-space: nowrap;padding-left:10px;color:orange">{{$t('（0表示不限制）')}}</span>
            </div>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item
            :label="$t('总消费限额')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="coinLimit"
            :rules="[{ required: true, message: this.$t('请输入') }]"
          >
            <div style="display:flex;align-items: center;">
              <a-input
                v-model="model.coinLimit"
                :placeholder="$t('请输入')"
                class="cus-input"
                ref="coinLimit"
              />
              <span style="white-space: nowrap;padding-left:10px;color:orange">{{$t('（0表示不限制）')}}</span>
            </div>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import { putAction } from "@/api/manage";
export default {
  name: "MemberLimitModal",
  components: {},
  data() {
    return {
      title: this.$t("编辑"),
      visible: false,
      confirmLoading: false,
      model: {},
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 15,
      },
    };
  },
  mounted() {},
  methods: {
    keydown() {
      let that = this;
      if (event != null) {
        if (event.keyCode == 13) {
          var element = event.srcElement || event.target;
          if (document.all) {
            event.keyCode = 9;
          } else {
            event.preventDefault();
            that.handleOk();
          }
          event.keyCode = 0;
          return;
        }
      }
    },
    show(record) {
      let that = this;
      let dtl={
        dayCoinLimit:0,
        coinLimit:0,
      }
      that.model = Object.assign({}, dtl, record);
      that.visible = true;
      that.$nextTick(() => {
        that.confirmLoading = false
        that.$refs.form.clearValidate();
        that.$refs.dayCoinLimit.focus();
      });
    },
    close() {
      this.visible = false
    },
    handleOk() {
      let that = this;
      that.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true;
          let params={
            id:that.model.id,
            dayCoinLimit:that.model.dayCoinLimit,
            coinLimit:that.model.coinLimit
          }
          putAction('/member/bisMemberCard/edit',params).then(res=>{
            if(res.success){
              that.$message.success(res.message)
              that.$emit('ok')
              that.close()
            }else{
              that.$message.error(res.message)
            }
          })
        }
      })
    },
    handleCancel() {
      this.close();
    },
  },
};
</script>

<style scoped>
.f-notify {
  display: inline-block;
  margin-right: 10px;
  width: 430px;
  color: red;
}
</style>
